// html{
//     // margin: 0;
//     // padding: 0;
//     width: 100%;
//     height: 100%;
// }
main{
  
}
.overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3072f6;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    color: #fff;
    border-radius: 15px;
    font-size: 10px;
    letter-spacing: 0;
    height: 20px;
    line-height: 15px;
}
.overlayActive {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    box-shadow: 1px 1px 1px rgba(168, 162, 162, 0.2);
    color: #fff;
    border-radius: 15px;
    font-size: 10px;
    letter-spacing: 0;
    height: 20px;
    line-height: 15px;
}
.overlayActive::after {
    content: '';
    position: absolute;
    background-color: red;
    width: 5px;
    height: 5px;
    bottom: -2px;
    transform: rotate(45deg);
}
.overlay::after {
    content: '';
    position: absolute;
    background-color: #3072f6;
    width: 5px;
    height: 5px;
    bottom: -2px;
    transform: rotate(45deg);
}